<template>
  <div class="login-content column Sms">
    <div class="phone gap column">
      <div class="text">手机号</div>
      <el-input
        v-model.trim="phoneNumber"
        style="width: 100%"
        placeholder="请输入手机号"
        maxlength="11"
      >
        <template #prefix>
          <div class="phone-icon icon"></div>
        </template>
      </el-input>
    </div>
    <div class="verify-code gap">
      <div class="text">验证码</div>
      <el-input
        v-model.trim="verifyCode"
        style="width: 100%"
        placeholder="请输入验证码"
        maxlength="6"
      >
        <template #prefix>
          <div class="verify-code-icon icon"></div>
        </template>
        <template #suffix>
          <el-button class="code-tip" text @click="sendVerifyCode">
            {{ verifyCodeText }}
          </el-button>
        </template>
      </el-input>
      <div class="warn" v-if="isWarn">验证码不正确！</div>
    </div>
  </div>
</template>
<script setup>
import { defineModel, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { sendCode } from '@/apis'

defineProps({
  isWarn: Boolean
})

const phoneNumber = defineModel('phoneNumber')
const verifyCode = defineModel('verifyCode')
const verifyCodeText = ref('获取验证码')

let timer = null
const sendVerifyCode = async () => {
  if (!phoneNumber.value) {
    ElMessage.warning('请输入手机号')
  } else if (!/^1[3456789]\d{9}$/.test(phoneNumber.value)) {
    ElMessage.warning('手机号格式错误，请检查！')
  } else if (verifyCodeText.value !== '获取验证码' || timer) {
    ElMessage.warning('请勿重复获取验证码')
  } else {
    const { F_responseNo, F_responseMsg } = await sendCode({
      phone: phoneNumber.value
    })
    if (F_responseNo !== 10000) {
      ElMessage.error(F_responseMsg)
    } else {
      let time = 60
      timer = setInterval(() => {
        if (time === 0) {
          verifyCodeText.value = '获取验证码'
          return
        }
        verifyCodeText.value = `重新发送(${time--}s)`
      }, 1000)
    }
  }
}
</script>
<style lang="less" scoped>
@import '../css/login.less';

.login-content {
  .phone {
    font-size: 20px;
    .phone-icon {
      background: url('@/assets/images/login/phone-icon.svg') no-repeat center
        center;
      background-size: contain;
    }
  }

  .verify-code {
    font-size: 20px;
    .verify-code-icon {
      background: url('@/assets/images/login/verify-code-icon.svg') no-repeat
        center center;
      background-size: contain;
    }

    .code-tip {
      font-size: 18px;
      font-weight: 400;
      color: @color-brand-regular;
    }
  }

  :deep(.el-button) {
    &:hover {
      background-color: transparent;
    }
  }
}
</style>
